<template>
  <div class="echart" :id="acc.id" :style="{ width: '100%', height: '100%' }"></div>
</template>

<script>
import echarts from 'echarts';
export default {
  data () {
    return {
      acc: {
        id: 'ac2',
        color: ['#FB9D46', '#F58B5E'],
        data1: [],
        data2: []
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: '#1D396B'
        }
      },
      axisLine: {
        lineStyle: {
          type: 'solid',
          color: '#E0E7EC', // 左边线的颜色
          width: '1'// 坐标线的宽度
        }
      },
      axisTick: {
        show: false
      }
    };
  },
  mounted () {
    setTimeout(() => {
      this.initChart();
    }, 1000);
  },
  methods: {
    initChart (data) {
      let getchart = echarts.init(document.getElementById(this.acc.id))
      var className = []
      this.acc.data1 = []
      this.acc.data2 = []
      data.forEach(item => {
        className.push(item.projectName)
        this.acc.data1.push(item.incomeAmount)
        this.acc.data2.push(item.expenseAmount)
      })
      var legend = ['收入', '支出']
      var option = {
        title: {
          subtext: '单位：（万元）',
          left: '110',
          top: 2,
          subtextStyle: {// 副标题的属性
            color: '#303133'
          }
        },
        dataZoom: [{
          textStyle: false,
          show: true,
          startValue: 0, // 数据窗口范围的起始数值
          endValue: 4,
          fillerColor: '#C1C1C1', // 选中背景颜色
          backgroundColor: '#EBEEF5', // 没选中背景颜色
          height: 5,
          bottom: '10',
          left: 30,
          width: '93%',
          borderColor: '#ffffff',
          dataBackground: {
            lineStyle: {
              opacity: 0
            },
            areaStyle: {
              opacity: 0
            }
          }
        },
        {
          type: 'inside',
          xAxisIndex: 0,
          zoomOnMouseWheel: false, // 滚轮是否触发缩放
          moveOnMouseMove: true, // 鼠标滚轮触发滚动
          moveOnMouseWheel: true
        }],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: legend,
          left: 10,
          top: 12,
          itemWidth: 6,
          itemHeight: 6,
          icon: 'circle' //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，none
        },
        xAxis: {
          type: 'category',
          data: className,
          axisLine: {show: false},
          axisLabel: {
            textStyle: {color: '#C6CACD'}// 字体颜色
          },
          splitLine: {show: false},
          axisTick: {show: false} // 尺寸边线
        },

        yAxis: {
          type: 'value',
          axisLine: {show: false},
          splitLine: {
            show: true,
            lineStyle: {
              color: '#EBEEF5'
            }
          },
          axisLabel: {
            textStyle: {color: '#C6CACD'}// 字体颜色
          },
          axisTick: {show: false} // 尺寸边线
        },
        series: [{
          name: legend[0],
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {color: '#409EFF'}
          },
          data: this.acc.data1
        },
        {
          name: legend[1],
          type: 'bar',
          barWidth: '15%',
          itemStyle: {
            normal: {color: '#F56C6C'}
          },
          data: this.acc.data2
        }]
      };
      getchart.setOption(option);
      // 随着屏幕大小调节图表
      window.addEventListener('resize', () => {
        getchart.resize();
      });
    }
  }
};
</script>
